// 获取所有的小圆点和图片容器
const dots = document.querySelectorAll('.dot');
const slides = document.querySelector('.slides');
const slideItems = document.querySelectorAll('.slide');

// 当前显示的图片索引
let currentIndex = 0;

// 轮播函数，用于切换图片
function changeSlide(index) {
    const offset = -index * 100; 
    slides.style.transform = `translateX(${offset}%)`;

    dots.forEach(dot => dot.classList.remove('active'));
    dots[index].classList.add('active');

    currentIndex = index;  
}

// 自动轮播，每3秒自动切换图片
let autoSlide = setInterval(() => {
    currentIndex = (currentIndex + 1) % slideItems.length;
    changeSlide(currentIndex);
}, 3000);

// 点击小圆点时切换到对应的图片
dots.forEach(dot => {
    dot.addEventListener('click', function() {
        const index = parseInt(dot.getAttribute('data-index'));
        changeSlide(index);
        clearInterval(autoSlide); 
        autoSlide = setInterval(() => {
            currentIndex = (currentIndex + 1) % slideItems.length;
            changeSlide(currentIndex);
        }, 3000);
    });
});
